<template>
  <div class="container">
    <!-- 用户个人信息 -->
    <div class="personalInfo">
      <div class="left">
        <img
          src="https://img1.baidu.com/it/u=3680250064,1696525736&fm=253&fmt=auto&app=120&f=JPEG?w=900&h=600"
          alt="头像"
        />
        <div class="textInfo">
          <p>方兰燕dpk.</p>
          <p>账号名:方兰燕dpk <van-icon name="qr" /></p>
          <p>关注 31 | 粉丝 1</p>
        </div>
      </div>
      <van-icon name="setting-o" class="settingBtn" />
    </div>
    <div class="myOrder">
      <div class="upper">
        <h2>我的订单</h2>
        <span>全部<van-icon name="arrow" /></span>
      </div>
      <div class="down">
        <router-link to="/wait"><van-icon name="idcard" />待付款</router-link>
        <router-link to="/wait"><van-icon name="peer-pay" />待发货</router-link>
        <router-link to="/wait"
          ><van-icon name="logistics" />待收货</router-link
        >
        <router-link to="/wait"><van-icon name="chat-o" />待评价</router-link>
        <router-link to="/wait"
          ><van-icon name="refund-o" />退款/售后</router-link
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FivetbMytaobao",
};
</script>

<style lang="scss" scoped>
.container {
  background: #f4f6f8;
  width: 100%;

  .personalInfo {
    padding: 20px 10px 0px;
    display: flex;
    text-align: left;
    justify-content: space-between;
    align-content: center;
    .left {
      display: flex;
    }
    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .textInfo {
      line-height: 22px;
      p:nth-child(1) {
        color: #333;
        font-weight: 700;
        font-size: 18px;
      }
      p:nth-child(2) {
        font-size: 12px;
        margin-top: 5px;
        margin-bottom: 5px;
      }
      p:nth-child(3) {
        font-size: 14px;
        color: #333;
      }
    }

    .settingBtn {
      font-size: 20px;
      color: #000;
    }
  }
  .myOrder {
    width: 96%;
    height: 120px;
    padding: 2% 2%;
    .upper {
      display: flex;
      width: 100%;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .down {
      display: flex;
      width: 100%;
      justify-content: space-around;
     a {
        font-size: 14px;
        color: #000;
      }
      .van-icon {
        font-size: 24px;
        display: block;
        margin-block: 10px;
      }
    }
  }
}
</style>
